<template>
  <div class="container">
    <div ref="chart" class="myChart"></div>
  </div>
</template>
<script>
export default {
  props: ["trendWork",],
  data() {
    return {
      conWidth: ""
    };
  },
  mounted() {
    this.echartsInit();
  },
  watch: {
    trendWork: {
      handler() {
        this.$nextTick(() => {
          this.echartsInit();
        });
      }
    },
  },
  methods: {
    echartsInit() {
      // 找到容器
      var myChart_div = this.$refs.chart;
      // 开始渲染
      if(myChart_div){
          // console.log("mychart不空")
          let myChart = this.$echarts.init(myChart_div);
          myChart.setOption({
            title: { text: this.trendWork.title },
            tooltip: {
                trigger:'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                data:this.trendWork.legend //需要和series的name的值保持一致
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                axisLine: {
                    //x轴颜色修改
                    lineStyle: {
                    color: "#909399"
                    }
                },
                data: this.trendWork.dataX
            },
            yAxis: {
                type: "value",
                axisTick: {
                    //y轴刻度线
                    show: true
                },
                axisLine: {
                    //y轴
                        show: true
                },
                //    axisLabel : {
                //         formatter: (val)=>{
                //           var boo = false;
                //           this.trend.data.forEach(element => {
                //             if(element>0){
                //               boo = true
                //             }
                //           });
                //           if(this.units!="%" && !boo){
                //             val = val * 10;
                //           }
                //           return val + this.units
                //         }
                //     },
            },
            series: [
                {
                    name:"登录总时长",
                    type: "line",
                    data: this.trendWork.data,
                    symbol: "circle", //折点设置为实心
                    symbolSize: 10, //折点大小
                    itemStyle: {
                    // normal: {
                    //     color: "skyblue", //折点颜色
                    //     lineStyle: {
                    //         //折线颜色
                    //         color: "skyblue"
                    //         }
                    //     }
                    }
                },{//鼠标悬浮的显示字样
                    name: '置闲总时长',
                    type: 'line', //line     pie
                    data: this.trendWork.data2
                },{//鼠标悬浮的显示字样
                    name: '受理数量',
                    type: 'line', //line     pie
                    data: this.trendWork.data3
                },{//鼠标悬浮的显示字样
                    name: '置忙总时长',
                    type: 'line', //line     pie
                    data: this.trendWork.data4
                },{//鼠标悬浮的显示字样
                    name: '小休次数',
                    type: 'line', //line     pie
                    data: this.trendWork.data5
                }
            ]
        });
        window.onresize  = myChart.resize;
      }
     
    }
  }
};
</script>

<style lang="scss" scoped>
    .container {
        .myChart {
            width: 100%;
            height: 400px;
            // margin-left: auto;
            // margin-right: auto;
        }
    }
</style>